<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p ref="title">{{msg}}</p>
        <button @click="doModify">修改msg</button>
        <hr>

        <p>{{user.name}}</p>
        <button @click="doUpdate">修改属性</button>
        <br>

        <!-- 
            由于Object.defineProperty()限制，Vue不能检测对象属性的添加或删除            
         -->
        <p>{{user.age}}</p>
        <button @click="doAdd">添加属性</button>
        <button @click="doDelete">删除属性</button>
        <hr>

        <!-- 
            由于JavaScript限制，Vue不难检测数组的以下变动：
                1.直接使用索引操作数组元素的值
                2.当你修改数组的长度
         -->
        <p>{{names}}</p>
        <button @click="doArray">操作数据</button>
    </div>
</body>
<script>
    var vm=new Vue({
        // el:'#app',
        data:{
            msg:'welcome',
            user:{
                id:1001,
                name:'tom'
            },
            names:['aaa','bbb','ccc']
        },
        methods: {
            print(){
                console.log('print方法');
            },
            doModify(){
                this.msg='欢迎'; // 修改数据，异步执行

                // console.log(vm===this);
                // console.log(vm.$refs.title.textContent);
                // 此时DOM还没更新，Vue实现响应式并不是数据发生变化之后DOM立即变化，而是按的策略进行DOM的更新，需要时间！！！ 
                this.$nextTick(function(){
                    // 等待DOM更新完成后才会执行
                    console.log(this.$refs.title.textContent);
                });
            },
            doUpdate(){
                this.user.name='alice'; // 修改原有的属性的值，可以触发更新，响应式
            },
            doAdd(){
                // this.user.age=20; // 通过普通方式添加属性时无法实时监视
                // this.$set(this.user,'age',20); // 使用Vue实例的$set()，可以实时监视
                // Vue.set(this.user,'age',20); // 使用Vue全局方法Vue.set()
                if(this.user.age){
                    this.user.age++;
                }else{
                    Vue.set(this.user,'age',1);
                }
            },
            doDelete(){
                if(this.user.age){
                    // delete this.user.age; // 无法触发更新
                    // this.$delete(this.user,'age');
                    Vue.delete(this.user,'age');
                }
            },
            doArray(){
                // this.names[0]='xxx';  // 无法触发更新
                // this.$set(this.names,0,'xxx');
                // this.names.splice(0,1,'xxx'); // 使用变异方法
                // this.names.push('yyy');

                // this.names.length=2;
                this.names.splice(2); // 从索引为2的位置删除到最后，相当于保留长度为2
            }
        },
    });

    // 手动挂载Vue实例
    vm.$mount('#app');

    
    // console.log(vm.$el.__vue__);
    // vm.$destroy();
    // console.log(vm.$el.__vue__);
</script>
</html>